// src/pages/shopList/menuList/menuList.js
import getIn from '../../../../yali-sdk/utils/getIn';
import { SUCCESS } from '../../../../yali-sdk/utils/success';
import { FAIL } from '../../../../yali-sdk/utils/fail';
import fetchShopCate from '../../../../yali-sdk/business/shop/fetchShopCate';
const windowHeight = wx.getSystemInfoSync().windowHeight;
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    cate_id: {
      type: null,
      value: null,
      observer: function (newVal, oldVal) {
        if (newVal!=oldVal) {
          let menuText = [...this.data.menuText]
          if (this.data.shopCate.length > 0) {
            this.data.shopCate.map && this.data.shopCate.map(x => {
              if (x.id == newVal) {
                menuText[0] = x.name;
              }
            })
          }
          this.setData({ 'dataParam.cate_id': newVal, menuText });
        }
      }
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    animationData: {},
    menuItemIndex: null,// 被选中导航索引
    menuShow: false,
    shopCate: [],// 一级分类数组
    second_cate: [],// 二级分类数组
    third_cate: [], // 三级分类数组
    second_cate_id: null,
    third_cate_id: null,
    menuText: ['全部商家', '附近', '离我最近'],// 导航数组
    dataParam:{
      cate_id: null,
      distance: null,
      order: 'distance',
    },
    distance: [
      { name: '500米', distance: '500', isSelect: false },
      { name: '1000米', distance: '1000', isSelect: false },
      { name: '3000米', distance: '3000', isSelect: false },
      { name: '5000米', distance: '5000', isSelect: false },
      { name: '10千米', distance: '10000', isSelect: false },
      { name: '全城', distance: null, isSelect: false }
    ],
    order: [
      { name: '智能排序', order: 'auto', isSelect: false },
      { name: '离我最近', order: 'distance', isSelect: true },
      { name: '人气最高', order: 'feedback', isSelect: false },
    ],
  },
  ready() {
    const location = wx.getStorageSync('location'); 
    const params = {
      is_with_shops: true,
      lng: location.longitude,
      lat: location.latitude,
      }
    global.ActionDispatcher.execute(fetchShopCate, params, (status, result) => {
      if(status == SUCCESS) {
        const shopCate = getIn(result.data, ['list']) || [];
        shopCate.unshift({name: "全部商家", id: null});
        const second_cate = shopCate.find(x => x.id == this.data.cate_id);
        const menuText = [...this.data.menuText];
        menuText[0] = second_cate ? second_cate.name : menuText[0];
        const dataParam = { ...this.data.dataParam, cate_id: this.data.cate_id }
        if (second_cate && second_cate._child) {
          this.setData({ shopCate, menuText, dataParam, second_cate });
        } else {
          this.setData({ shopCate, dataParam, menuText });
        }
      }
    })
  },
  /**
   * 组件的方法列表
   */
  methods: {
    menuList(e) {
      const menuItemIndex = getIn(e.currentTarget, ['id']);
      if (!this.data.menuShow) {
        this.showModal();
      } else if (menuItemIndex == this.data.menuItemIndex) {
        this.hideModal();
      }
      this.setData({ menuItemIndex });
    },
    /**弹出弹窗**/
    showModal() {
      this.timers && clearTimeout(this.timers);
      const animation = wx.createAnimation({
        duration: 200,
        timingFunction: 'linear',
        delay: 0,
      });
      this.animation = animation;
      animation.translateY(-windowHeight * 0.4).step();
      this.setData({ animationData: animation.export(), menuShow: true });
      this.times = setTimeout(() => {
        animation.translateY(0).step();
        this.setData({
          animationData: animation.export()
        });
      }, 200);
    },
    // 取消弹出框
    hideModal() {
      this.timers && clearTimeout(this.timers);
      const animation = wx.createAnimation({
        duration: 200,
        timingFunction: 'linear',
        delay: 0,
      });
      this.animation = animation;
      animation.translateY(-windowHeight * 0.4).step();
      this.setData({ animationData: animation.export() });
      this.times = setTimeout(() => {
        animation.translateY(0).step();
        this.setData({
          animationData: animation.export(),
          menuShow: false,
          menuItemIndex: null,
        });
      }, 200);
    },
    // 选择店铺分类
    selectCate(e) {
      const second_cate = getIn(e.currentTarget, ['dataset', 'second_cate']);
      const third_cate = getIn(e.currentTarget, ['dataset', 'third_cate']);
      const third_cate_item = getIn(e.currentTarget, ['dataset', 'third_cate_item']);
      if (second_cate) {
        if (!second_cate._child) {
          let menuText = [...this.data.menuText];
          menuText[0] = second_cate.name;
          const dataParam = { ...this.data.dataParam, cate_id: second_cate.id }
          this.triggerEvent('selectShop', { ...dataParam });
          this.setData({ cate_id: second_cate.id, second_cate: [], menuText, dataParam });
          this.hideModal();
          return
        }
        this.setData({ cate_id: second_cate.id, second_cate });
      } else if (third_cate) {
        if (!third_cate._child) {
          let menuText = [...this.data.menuText];
          menuText[0] = third_cate.name;
          const dataParam = { ...this.data.dataParam, cate_id: third_cate.id }
          this.triggerEvent('selectShop', { ...dataParam });
          this.setData({ second_cate_id: third_cate.id, third_cate: [], menuText, dataParam });
          this.hideModal();
          return
        }
        this.setData({ second_cate_id: third_cate.id, third_cate });
      } else if (third_cate_item) {
        let menuText = [...this.data.menuText];
        menuText[0] = third_cate_item.name;
        const dataParam = { ...this.data.dataParam, cate_id: third_cate_item.id }
        this.triggerEvent('selectShop', { ...dataParam });
        this.setData({ third_cate_id: third_cate_item.id, menuText, dataParam });
        this.hideModal();
      }
    },
    // 选择距离
    selectDistance(e) {
      const item = getIn(e.currentTarget, ['dataset', 'item']);
      const dataParam = { ...this.data.dataParam, distance: item.distance }
      this.triggerEvent('selectShop', { ...dataParam });
      let menuText = [...this.data.menuText];
      menuText[1] = item.name;
      const distance = this.data.distance.map((x) => {
        if (x.distance == item.distance) {
          x.isSelect = true;
        } else {
          x.isSelect = false;
        }
        return x;
      });
      this.setData({ dataParam, menuText, distance });
      this.hideModal();
    },
    // 选择排列方式
    selectOrder(e) {
      const item = getIn(e.currentTarget, ['dataset', 'item']);
      const dataParam = { ...this.data.dataParam, order: item.order }
      this.triggerEvent('selectShop', { ...dataParam });
      let menuText = [...this.data.menuText];
      menuText[2] = item.name;
      const order = this.data.order.map((x) => {
        if (x.order == item.order) {
          x.isSelect = true;
        } else {
          x.isSelect = false;
        }
        return x;
      });
      this.setData({ dataParam, menuText, order });
      this.hideModal();
    }
  }
})
